<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ManageSystem管理系统</title> 
    <!-- bootstrap 3.0.2 -->
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- font Awesome -->
    <link href="/resource/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="/resource/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Morris chart -->
    <link href="/resource/css/morris/morris.css" rel="stylesheet" type="text/css" />
    <!-- jvectormap -->
    <link href="/resource/css/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
    <!-- iCheck for checkboxes and radio inputs -->
    <link href="/resource/css/iCheck/all.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="/resource/css/style.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" type="text/css" href="/resource/js/jQueryMessage/css/message.skin.css" />
	<style>
		.pwsd{
			position: absolute;
			left: 0px;
			margin-top: -635px;
			margin-left: 200px;
			z-index: 1200;
			width: 900px;
			height: 490px;
			background-color: #00a7d0;
			box-shadow: #bab6aa;
			display: none;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
			border-top-left-radius: 36px;
			border-top-right-radius: 10px;
		}
		.fugai{
			width: 1000%;
			height: 630px;
			position: absolute;
			left: auto;
			margin-top: -640px;
			z-index: 1100;
			background-color: rgba(41, 81, 62, 0.92);
			display: none;
		}
	</style>
</head>

<body>
	<div class="row">
	    <div class="col-md-12">
	    	<h1 class="panel-heading">课程管理</h1>
	        <!--breadcrumbs start -->
	        <ul class="breadcrumb">
				<li><a href="/index/toIndex"><i class="fa fa-home"></i> 首页</a></li>
				<li class="active">课程管理</li>
			</ul>
	        <!--breadcrumbs end -->
	    </div>
	</div>
	<div class="row">
		<div class="col-lg-12">
			<section class="panel">
				<div class="panel-body">
	                 <!-- <span class="pull-right badge badge-info">32</span> -->
	                 <button class="btn btn-primary btn-addon btn-sm" th:onclick="saveLesson();">
	                     <i class="fa fa-plus"></i>新增课程
	                 </button>
	            </div>
			    <div class="panel-body table-responsive">
					<table class="table table-hover">
						<thead>
							<tr>
								<th style="width:50px;">ID</th>
								<th>课程号</th>
								<th>课程名称</th>
								<th>学分</th>
								<th>课时</th>
								<th>开启状态</th>
								<th>开课时间</th>
								<th>开课学期</th>
								<th>创建人</th>
								<th>创建时间</th>
								<th>更新人</th>
								<th>更新时间</th>
								<th style="width:150px;">操作</th>
							</tr>
						</thead>
						<tbody>
							<tr th:each="item,stat : ${lesson.list}">
								<td><input type="checkbox" class="flat-grey list-child" th:value="${item.id}" /></td>
								<td th:text="${item.lessonId}"></td>
								<td th:text="${item.name}"></td>
								<td th:text="${item.creditHour}"></td>
								<td th:text="${item.totalTime}"></td>
								<td th:switch="${item.isStart}">
									<span th:case="1">启用</span>
									<span th:case="0">禁用</span>
								</td>
								<td th:text="${#dates.format(item.startTime,'yyyy-MM-dd')}"></td>
								<td th:switch="${item.startSemester}">
									<span th:case="1">大一上学期</span>
									<span th:case="2">大一下学期</span>
									<span th:case="3">大二上学期</span>
									<span th:case="4">大二下学期</span>
									<span th:case="5">大三上学期</span>
									<span th:case="6">大三下学期</span>
									<span th:case="7">大四上学期</span>
									<span th:case="8">大四下学期</span>
								</td>
								<td th:text="${item.createdBy}"></td>
								<td th:text="${#dates.format(item.createdTime,'yyyy-MM-dd')}"></td>
								<td th:text="${item.updatedBy}"></td>
								<td th:text="${#dates.format(item.updatedTime,'yyyy-MM-dd')}"></td>
								<td>
									<!--<a th:href="@{/stu/lesson/toEdit(id=${item.id})}" class="btn btn-xs btn-success">编辑</a>-->
									<button onclick="editLesson(this.value);" th:value="${item.id}" class="btn btn-xs btn-success">编辑</button>
									<span>&nbsp;|&nbsp;</span>
									<a href="javascript:void(0)" data-toggle="modal" class="btn btn-xs btn-danger" th:itemid="${item.id}" th:onclick="confrimRemove(this.getAttribute('itemid'));">删除</a>
								</td>
							</tr>
							<tr th:if="${#lists.isEmpty(lesson.list)}">
								<td colspan="8" align="center">无数据</td>
							</tr>
						</tbody>
					</table>
			    </div>
			    <div class="panel-footer bg-white text-right">
                     <ul class="pagination">
                         <li><a th:href="@{/stu/lesson/list(pageNum=${lesson.navigateFirstPage},pageSize=${lesson.pageSize})}" title="首页" th:class="${lesson.isFirstPage} ? 'paginationNotAllowed' : ''">«</a></li>
                         <li><a th:href="@{/stu/lesson/list(pageNum=${lesson.prePage},pageSize=${lesson.pageSize})}" title="上一页" th:if="${lesson.hasPreviousPage}">‹</a></li>
                         <li th:each="pageinfo : ${lesson.navigatepageNums}"><a th:href="@{/stu/lesson/list(pageNum=${pageinfo},pageSize=${lesson.pageSize})}" th:class="${pageinfo == lesson.pageNum} ? 'paginationActive' : ''" th:text="${pageinfo}"></a></li>
                         <li><a th:href="@{/stu/lesson/list(pageNum=${lesson.nextPage},pageSize=${lesson.pageSize})}" title="下一页" th:if="${lesson.hasNextPage}">›</a></li>
                         <li><a th:href="@{/stu/lesson/list(pageNum=${lesson.navigateLastPage},pageSize=${lesson.pageSize})}" title="未页" th:class="${lesson.isLastPage} ? 'paginationNotAllowed' : ''">»</a></li>
                     </ul>
                 </div>
			</section>
		</div>
	</div>
	<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="remove-dialog" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    	<div class="modal-header">
                    	    <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                    	    <h4 class="modal-title">操作提示？</h4>
                    	</div>
                    	<div class="modal-body">
							<h4 class="modal-title">您确定要删除该记录吗？</h4>
							<input type="hidden" id="cacheID" />
							<!-- <input type="hidden" id="cid" /> -->
                    	</div>
                    	<div class="modal-footer">
                    		<button type="button" class="btn btn-primary btn-addon btn-sm" onclick="remove();">确定</button>
                    		<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                    	</div>
                </div>
            </div>
	</div>
	<!--弹框新增课程-->
	<div id="pwsd" class="pwsd">
		<div class="pws">

			<div class="panel-body">
				<h2><i class="fa fa-lock"></i>  新增课程</h2>
				<hr>
				<div class="form-horizontal" data-validator-form>
					<form enctype="multipart/form-data" method="post" th:action="@{/stu/lesson/add}" onsubmit="return validateForm();">
						<input type="hidden"  id="id" name="id"/>
						<div class="form-group">
							<label class="col-sm-2 control-label">课程号</label>
							<div class="col-sm-3">
								<input id="lessonId" name="lessonId"  type="number" class="form-control" min="1001000" max="1009000" placeholder="课程号1001000-1009000">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">课程名</label>
							<div class="col-sm-3">
								<input id="name"  name="name"  type="text" class="form-control"  placeholder="课程名称">
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-2 control-label" >学 分</label>
							<div class="col-sm-3">
								<input id="creditHour" name="creditHour" type="number" min="0" max="10" class="form-control" placeholder="学分0-10">
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-2 control-label" >课 时</label>
							<div class="col-sm-3">
								<input id="totalTime" name="totalTime" type="number" min="10" max="100" class="form-control" placeholder="课时10-100">
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-2 control-label" >开课时间</label>
							<div class="col-sm-3">
								<input id="startTime" name="startTime" type="date"  class="form-control" placeholder="开课时间">
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-2 control-label" >开课学期</label>
							<div class="col-sm-3">
								<select class="form-control" id="startSemester" name="startSemester">
									<option value="1" selected>大一上学期</option>
									<option value="2">大一下学期</option>
									<option value="3">大二上学期</option>
									<option value="4">大二下学期</option>
									<option value="5">大三上学期</option>
									<option value="6">大三下学期</option>
									<option value="7">大四上学期</option>
									<option value="8">大四下学期</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-2 control-label" >是否启用</label>
							<div class="col-sm-3">
								<select class="form-control" id="isStart" name="isStart">
									<option value="1" selected>启用</option>
									<option value="0">禁止</option>
								</select>
							</div>
						</div>
						<input id="createdBy" name="createdBy" type="hidden" class="form-control" />
						<input id="updatedBy" name="updatedBy" type="hidden" class="form-control" />
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-6">
								<button type="submit" class="btn btn-primary" >确认新增</button>
								<button type="button" class="btn btn-primary" onclick="colseWin();">退出新增</button>
							</div>
						</div>
					</form>
					<div class="checkbox icheck">
						<label class=""></label>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--页面遮挡侧面-->
	<div id="fugai" class="fugai">


	</div>
	<!-- jQuery 2.0.2 -->
	<script src="/resource/js/jquery.min.js" type="text/javascript"></script>
	<!-- jQuery UI 1.10.3 -->
	<script src="/resource/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
	<!-- Bootstrap -->
	<script src="/resource/js/bootstrap.min.js" type="text/javascript"></script>
	<!-- iCheck -->
    <script src="/resource/js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
	<!-- Director App -->
	<script src="/resource/js/Director/app.js" type="text/javascript"></script>
	<script src="/resource/js/jquery.serializejson.js"></script>
	<script type="text/javascript" src="/resource/js/jQueryMessage/js/jquery.plugin.message.js"></script>
	<script type="text/javascript">
		window.onload = function(){
			renderCheckBox();
		}
		
		function renderCheckBox(){
			$('input').on('ifChecked', function(event) {
			    $(this).parents('li').addClass("task-done");
			    console.log('ok');
			});
			$('input').on('ifUnchecked', function(event) {
			    $(this).parents('li').removeClass("task-done");
			    console.log('not');
			});
			
			$('input[type="checkbox"].flat-grey, input[type="radio"].flat-grey').iCheck({
			    checkboxClass: 'icheckbox_flat-grey',
			    radioClass: 'iradio_flat-grey'
			});
		}

		//删除提示框
		function confrimRemove(id){
			$("#remove-dialog").modal();
			$("#cacheID").val(id);
		}

		//删除确定
		function remove(){
			var id = $("#cacheID").val();
			window.location.href="/stu/lesson/delete?id="+id;
			$("#remove-dialog").modal('hide');
		}
		//获取当前登录的用户--防止菜单被拖出去访问
		//获取当前登录的用户
		var userStr = sessionStorage.getItem("douglas");
		if(userStr == null || userStr == "" || userStr == "undefined"){
			window.location.href = "/stu/user/toLogin";
		}else{
			var user = JSON.parse(userStr);
			$("#createdBy").val(user.realname);
		}


		//新增弹框th:onclick="editPassword();"
		function saveLesson() {
			document.getElementById("pwsd").style.cssText="display:block";
			document.getElementById("fugai").style.cssText="display:block";
		}
		//编辑弹框
		function editLesson(id) {
			//获取id
			console.log(id);
			//发送ajax请求获取详细信息
			getLessonById(id);
			// 设置更新人
			var user = JSON.parse(userStr);
			$("#updatedBy").val(user.realname);
			document.getElementById("pwsd").style.cssText="display:block";
			document.getElementById("fugai").style.cssText="display:block";
		}
		//关闭新增弹框
		function colseWin() {
			document.getElementById("pwsd").style.cssText="display:none";
			document.getElementById("fugai").style.cssText="display:none";
			window.location.href="/stu/lesson/list";
		}

		/* 保存方法 */
		function validateForm(){
			var lessonId = $("#lessonId").val();
			var name = $("#name").val();
			var startTime = $("#startTime").val();
			var creditHour = $("#creditHour").val();
			var totalTime = $('#totalTime').val();
			console.log(lessonId+name)
			if(lessonId == null || lessonId==''){
				$("body").MessageBox({
					type: 'error',
					message:'课程号不能为空！',
					timeout:3000,
					callbak:null
				});
				return false;
			}
			if(name == null || name ==''){
				$("body").MessageBox({
					type: 'error',
					message:'姓名不能为空！',
					timeout:3000,
					callbak:null
				});
				return false;
			}
			if(startTime == null || startTime==''){
				$("body").MessageBox({
					type: 'error',
					message:'开课时间不能为空！',
					timeout:3000,
					callbak:null
				});
				return false;
			}
			if(creditHour == null || creditHour==''){
				$("body").MessageBox({
					type: 'error',
					message:'学分不能为空！',
					timeout:3000,
					callbak:null
				});
				return false;
			}
			if(totalTime == null || totalTime==''){
				$("body").MessageBox({
					type: 'error',
					message:'课时不能为空！',
					timeout:3000,
					callbak:null
				});
				return false;
			}
			return true;
		}

		//根据id查询Lesson对象的请求
		function getLessonById(id){
			$.ajax({
				url : "/stu/lesson/getLesson?id="+id,
				contentType : 'application/json',
				type : "GET",
				dataType : "JSON",
				success : function(result) {
					console.log(result);
					if(result.success){
						$("#lessonId").val(result.data.lessonId);
						$("#lessonId").attr("readOnly",true);
						$("#id").val(result.data.id);
						$("#name").val(result.data.name);
						$("#creditHour").val(result.data.creditHour);
						$("#totalTime").val(result.data.totalTime);
						$("#startTime").val(result.data.startTime.split(" ")[0]);
						var isStart = result.data.isStart;
						if(isStart == '0'){
							set_select_checked("isStart",0);
						}else if(isStart == '1') {
							set_select_checked("isStart", 1);
						}
						var num = result.data.startSemester;
						if(num == '1'){
							set_select_checked("startSemester",1);
						}else if(num == '2'){
							set_select_checked("startSemester",2);
						}else if(num == '3'){
							set_select_checked("startSemester",3);
						}else if(num == '4'){
							set_select_checked("startSemester",4);
						}else if(num == '5'){
							set_select_checked("startSemester",5);
						}else if(num == '6'){
							set_select_checked("startSemester",6);
						}else if(num == '7'){
							set_select_checked("startSemester",7);
						}else if(num == '8'){
							set_select_checked("startSemester",8);
						}
					}else{
						$("body").MessageBox({
							type: 'error',
							message:result.info,
							timeout:3000,
							callbak:null
						});
						alert(result.info)
					}
				}
			});
		}
		/**
		 * 设置select控件选中
		 * @param selectId select的id值
		 * @param checkValue 选中option的值
		 * @author 标哥
		 */
		function set_select_checked(selectId, checkValue){
			var select = document.getElementById(selectId);

			for (var i = 0; i < select.options.length; i++){
				if (select.options[i].value == checkValue){
					select.options[i].selected = true;
					break;
				}
			}
		}
	</script>
</body>
</html>
